﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/header.jsp" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Checkout</title>
    <!-- JqueryUI -->
    <link rel="stylesheet" type="text/css" href="${style}/front/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="${style}/input.css">
    <link rel="stylesheet" type="text/css" href="${style}/animate.min.css">
    <link rel="stylesheet" href="${Layui}/css/layui.css" media="all">
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="${style}/front/bootstrap.min.css">
    <!-- Awesome font icons -->
    <link rel="stylesheet" type="text/css" href="${style}/front/font-awesome.min.css" media="screen">
    <!-- Owlcoursel -->
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.carousel.css">
    <link rel="stylesheet" type="text/css" href="${style}/front/owl-coursel/owl.transitions.css">
    <!-- Magnific-popup -->
    <link rel="stylesheet" type="text/css" href="${style}/front/magnific-popup/magnific-popup.css">
    <!-- Style -->
    <link rel="stylesheet" type="text/css" href="${style}/front/style.css" media="screen">
    <!-- Fw -->
    <link rel="stylesheet" type="text/css" href="${style}/front/fw.css" media="screen">
    <!-- BeAlert -->
    <link rel="stylesheet" type="text/css" href="${Resource}/BeAlert/BeAlert.css" media="screen">
</head>
<body>

<%--herder--%>
<jsp:include page="header.jsp"/>

<!-- Checkout -->
<section>
    <div class="container">
        <div>
            <div id="content">
                <!--panel-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#collapse1" data-toggle="collapse" data-parent="#accordion"
                               class="accordion-toggle collapsed" aria-expanded="false">请选择地址
                                <i class="fa fa-caret-down"></i>
                            </a>
                        </h4>
                    </div>
                    <div id="collapse1" class="panel-collapse collapse in" role="tabpanel">
                        <div class="panel-body">
                            <form class="form-horizontal">
                                <div class="radio">
                                    <label>
                                        已存在的地址
                                    </label>
                                </div>
                                <div id="payment-existing">
                                    <select name="address_id" class="form-control form-item p-t-15 addressclass">
                                        <c:forEach items="${croAddresses}" var="address">
                                            <option value="${address.id}">
                                                    ${address.consignee}--${address.phone}--${address.address}--${address.country.name}/${address.provience.name}/${address.city.name}--${address.postcode}
                                            </option>
                                        </c:forEach>

                                    </select>
                                </div>
                                <div class="radio">
                                    <label>
                                        <button type="button" class="btn btn-primary btn-sm" data-toggle="modal"
                                                data-target="#updateModal">添加新地址
                                        </button>
                                    </label>
                                </div>
                                <div hidden class="modal fade" id="updateModal" tabindex="-1" role="dialog"
                                     aria-labelledby="myModalLabel" aria-hidden="true">
                                    <div class="modal-dialog">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-hidden="true">
                                                    &times;
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel">收货地址</h4>
                                            </div>
                                            <%--模态框样式--%>
                                            <div class="modal-body">
                                                <form class="form-horizontal" role="form">
                                                    <input hidden type="text" class="numprice" value="${numprice}">
                                                    <input hidden type="text" class="purchaseid" value="${purchaseid}">
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">收件人</label>
                                                        <div class="col-sm-10">
                                                            <input class="form-control" id="upconsignee" type="username"
                                                                   name="username"
                                                                   value="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">所在地区</label>
                                                        <div class="col-sm-10 selectList ">
                                                            <select class="country">
                                                                <option>请选择</option>
                                                            </select>
                                                            <select class="provience">
                                                                <option>请选择</option>
                                                            </select>
                                                            <select class="city">
                                                                <option>请选择</option>
                                                            </select>
                                                        </div>
                                                    </div>

                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">详细地址</label>
                                                        <div class="col-sm-10">
                                                            <input class="form-control" id="upaddress" type="username"
                                                                   value="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">联系方式</label>
                                                        <div class="col-sm-10">
                                                            <input class="form-control" id="upphone" name="upphone"
                                                                   type="username"
                                                                   value="">
                                                        </div>
                                                    </div>
                                                    <div class="form-group">
                                                        <label class="col-sm-2 control-label">邮政编码</label>
                                                        <div class="col-sm-10">
                                                            <input class="form-control" id="uppostcode"
                                                                   name="uppostcode" type="username"
                                                                   value="">
                                                        </div>
                                                    </div>
                                                </form>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                                </button>
                                                <button type="button" class="btn btn-primary upmodel">提交</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
                <!--panel-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title"><a href="#collapse3" data-toggle="collapse" data-parent="#accordion"
                                                   class="accordion-toggle collapsed" aria-expanded="false">优惠券<i
                                class="fa fa-caret-down"></i></a></h4>
                    </div>
                    <div id="collapse3" class="panel-collapse collapse in" role="tabpanel">
                        <div class="panel-body">
                            <c:if test="${fn:length(croMyqpons)>0}">
                                <p>请选择当前可用的优惠券</p>
                                <div class="form-group">
                                    <c:forEach items="${croMyqpons}" var="myqpon">
                                        <label>
                                            <i class='input_style radio_bg'>
                                                <input type="radio" name="myqponvalue" class="myqponvalue"
                                                       value="${myqpon.id}" qpval="${myqpon.croCoupons.value}"></i>
                                            价值：${myqpon.croCoupons.value}&nbsp;&nbsp;(${myqpon.croCoupons.description})
                                        </label>
                                    </c:forEach>
                                </div>
                            </c:if>
                            <c:if test="${fn:length(croMyqpons)==0}">
                                <p>当前无可用的优惠券</p>
                            </c:if>
                        </div>
                    </div>
                </div>
                <!--panel-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title"><a href="#collapse4" data-toggle="collapse" data-parent="#accordion"
                                                   class="accordion-toggle collapsed" aria-expanded="false">支付方式<i
                                class="fa fa-caret-down"></i></a></h4>
                    </div>
                    <div id="collapse4" class="panel-collapse collapse in" role="tabpanel">
                        <div class="panel-body"><p>请选择支付方式</p>
                            <div class="form-group">
                                <label>
                                    <c:forEach items="${SysDict['pay_type']}" var="type">
                                        <i class='input_style radio_bg'><input type="radio" name="paytype"
                                                                               class="paytype" value="${type.key}"></i>
                                        ${type.value}&nbsp;&nbsp;&nbsp;&nbsp;
                                    </c:forEach>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <!--panel-->
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a href="#collapse5" data-toggle="collapse" data-parent="#accordion"
                               class="accordion-toggle collapsed" aria-expanded="false">确认订单
                                <i class="fa fa-caret-down"></i>
                            </a>
                        </h4>
                    </div>
                    <div id="collapse5" class="panel-collapse collapse in" role="tabpanel">
                        <div class="panel-body">
                            <div class="table-responsive">
                                <table class="layui-table" lay-even="" lay-skin="row">
                                    <colgroup>
                                        <col width="80">
                                        <col width="80">
                                        <col width="50">
                                        <col width="50">
                                        <col width="50">
                                        <col width="50">
                                        <col width="50">
                                        <col width="50">
                                    </colgroup>
                                    <thead>
                                    <tr>
                                        <th>名称</th>
                                        <th>描述</th>
                                        <th>图片</th>
                                        <th>原价</th>
                                        <th>成交价</th>
                                        <th>数量</th>
                                        <th>总价</th>
                                    </tr>
                                    </thead>
                                    <c:forEach items="${goodsdetails}" var="goods">
                                        <tr>
                                            <td>${goods.name}</td>
                                            <td>${goods.describ}</td>
                                            <td><img src="${goods.photo}" width="70px"></td>
                                            <td>${goods.price}</td>
                                            <td>${goods.actprice}</td>
                                            <td>${goods.numbers}</td>
                                            <td>${goods.sumprice}</td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                                <div style="float: right;margin-right: 50px; margin-top: 80px;">
                                    <font style="font-size: large;">商品总额:  </font><font  style="font-size: large;color: #611596">${numprice}</font><br><br>
                                    <font style="font-size: large;">优惠额度:  </font><font id="qpon" style="font-size: large;color: #961309">0</font><br><br>
                                    <font style="font-size: large;">快递运费:  </font>&nbsp;<font id="expfee" style="font-size: large;color: #192796">${exfee}</font><br><br>
                                    <font style="font-size: large;">结算金额:  </font>&nbsp;<font id="totalprice" style="font-size: large;color: #179621">${numprice+exfee}</font>
                                </div>
                            </div>
                            <div class="remark" style="margin-top: 20px;">
                                <p>
                                    <strong>订单备注</strong>
                                </p>
                                <p>
                                    <textarea id="comment" name="comment" rows="3" class="form-control"></textarea>
                                </p>
                            </div>
                            <div class="buttons m-t-30">
                                <div class="pull-right">
                                    <button type="button" class="btn ht-btn bg-6 finalsubmitorder">提交订单</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!--/panel-->
            </div>
        </div>
    </div>
    </div>
</section>
<!-- Process order -->
<section class="process">
    <div class="container">
        <div class="row">
            <div class="col-sm-6 col-md-4">
                <div class="media ht-media">
                    <div class="media-left">
                        <i class="fa fa-phone bg-6"></i>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">客服热线 24/7: 0123-456-789</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="media ht-media">
                    <div class="media-left">
                        <i class="fa fa-truck bg-2"></i>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">智能分拣     快捷物流     暖心配送</h5>
                    </div>
                </div>
            </div>
            <div class="col-sm-6 col-md-4">
                <div class="media ht-media">
                    <div class="media-left">
                        <i class="fa fa-undo bg-3"></i>
                    </div>
                    <div class="media-body">
                        <h5 class="media-heading">100%优质服务   7天无理由退换货</h5>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<%--footer--%>
<jsp:include page="footer.jsp"/>

<!-- jQuery -->
<script src="${jquery}/jquery.js" charset="utf-8"></script>
<!-- JqueryUI -->
<script src="${jquery}/jquery-ui.js"></script>
<!-- Bootstrap -->
<script src="${Bootstrap}/js/bootstrap.js"></script>
<!-- Owl-coursel -->
<script src="${Js}/front/owl-coursel/owl.carousel.js"></script>

<script src="${Layui}/layui.js" charset="utf-8"></script>
<!-- Magnific-popup -->
<script src="${Js}/front/magnific-popup/jquery.magnific-popup.min.js"></script>
<!-- Script -->
<script src="${Js}/front/script.js"></script>
<script text="type/javascript" src="${Js}/front/input.js"></script>
<%--BeAlert--%>
<script src="${Resource}/BeAlert/BeAlert.js"></script>
<script src="${Js}/front/submitorder.js"></script>
<script>
    $(function () {
        $(".selectList").each(function () {
            var areaJson = eval(${areajson});
            console.log(areaJson);
            var temp_html;
            var oCountry = $(this).find(".country");
            var oProvince = $(this).find(".provience");
            var oCity = $(this).find(".city");
            //初始化国家
            var country = function () {
                $.each(areaJson, function (i, country) {
                    temp_html += "<option value='" + country.id + "'>" + country.name + "</option>";
                });
                oCountry.html(temp_html);
                province();
            };
            //赋值省份
            var province = function () {
                temp_html = "";
                var n = oCountry.get(0).selectedIndex;
                $.each(areaJson[n].proviences, function (i, province) {
                    temp_html += "<option value='" + province.id + "'>" + province.name + "</option>";
                });
                oProvince.html(temp_html);
                city();
            };
            //赋值城市
            var city = function () {
                temp_html = "";
                var m = oCountry.get(0).selectedIndex;
                var n = oProvince.get(0).selectedIndex;
                if (typeof(areaJson[m].proviences[n].citylist) == "undefined") {
                    oCity.css("display", "none");
                } else {
                    oCity.css("display", "inline");
                    $.each(areaJson[m].proviences[n].citylist, function (i, city) {
                        temp_html += "<option value='" + city.id + "'>" + city.name + "</option>";
                    });
                    oCity.html(temp_html);
                }
                ;
            };
            //选择国家改变省份
            oCountry.change(function () {
                province();
            });
            //选择省份改变城市
            oProvince.change(function () {
                city();
            });
            country();
        });
    });

</script>
</body>
</html>

